<!-- 组件内容 -->
<template>
	<view class="audio-page">
		<view class="box-left">
			<view class="page-btn" @click="clickAudio">
				<image :src="music_play ? stop_img : start_img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box-content">
			<view class="progress">
				<text>{{ getMinuteTime(now_time) }}</text>
				<slider :value="(now_time / total_time) * 100" block-size="10" block-color="#FF3333" activeColor="#FF3333" @change="sliderChange"></slider>
				<text>{{ getMinuteTime(total_time) }}</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'WZSAudio',
	props: ['music', 'image', 'title', 'autoplay'],
	data() {
		return {
			music_play: false,
			AUDIO: '',
			total_time: 0,
			now_time: 0,
			timeupdata: '',
			interval: '',
			start_img:
				'',
			stop_img:
				''
		};
	},
	watch: {
		// [name]:{ // obj.name时需要引号
		// 	handler(nv,ov){
		// 		// code
		// 	},
		// 	immediate:true, // 进入页面触发
		// 	deep:true, // 对对象深度监听
		// }
		music: {
			handler(nv, ov) {
				console.log('nv', nv);
				console.log('ov', ov);
				this.cleanMusic();
				this.playAudio();
			},
			immediate: true
		}
	},
	methods: {
		// 播放音乐
		playAudio() {
			// // #ifdef H5
			// this.AUDIO = uni.createInnerAudioContext();
			// // #endif
			// // #ifdef MP-WEIXIN
			// if(uni.getSystemInfoSync().platform == 'ios'){
			// 	this.AUDIO = uni.getBackgroundAudioManager()
			// }else{

			// }
			this.AUDIO = uni.createInnerAudioContext();
			// this.AUDIO = uni.getSystemInfoSync().platform == 'ios' ? uni.getBackgroundAudioManager() : uni.createInnerAudioContext();
			// //#endif
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// this.AUDIO.src = this.music;
			this.AUDIO.src = this.music;
			console.log('this.AUDIO.src', this.AUDIO.src);

			this.AUDIO.onCanplay(() => {
				console.log(this.AUDIO.duration);
				if (this.AUDIO.duration != 0 && !isNaN(this.AUDIO.duration)) {
					this.total_time = Math.round(this.AUDIO.duration);
					console.log('音频时长', this.total_time);
					clearInterval(this.interval);
				}
			});
			if (this.autoplay) {
				// this.clickAudio();
				setTimeout(() => {
					// this.clickAudio();
					this.AUDIO.autoplay = true;
					this.music_play = true;
					this.AUDIO.play();
				}, 2000);
			}
			this.timeupdata = setInterval(() => {
				// console.log((this.now_time / this.total_time) * 100)
				if (this.music_play) {
					this.now_time++;
					// console.log('当前时间', this.getMinuteTime(this.now_time))
					if (this.now_time >= this.total_time) {
						this.music_play = false;
						this.now_time = 0;
					}
				}
			}, 1000);
		},
		clickAudio() {
			// console.log('点击了一下');
			if (this.music_play) {
				this.music_play = false;
				this.AUDIO.pause();
			} else {
				this.music_play = true;
				this.AUDIO.play();
			}
		},
		// 拖动进度条
		sliderChange(e) {
			// console.log(e)
			const second = (e.detail.value / 100) * this.total_time;
			this.AUDIO.seek(second);
			this.now_time = second;
		},
		// 秒转换分秒
		getMinuteTime(data) {
			let minute = parseInt(data / 60);
			let second = parseInt(data % 60);
			if (minute.toString().length == 1) minute = `0${minute}`;
			if (second.toString().length == 1) second = `0${second}`;
			return `${minute}:${second}`;
		},
		cleanMusic() {
			if (this.music_play) {
				this.music_play = false;
				this.AUDIO.pause();
			}
			this.now_time = 0;
			clearInterval(this.timeupdata);
		}
	},
	destroyed() {
		this.cleanMusic();
	}
};
</script>
<style lang="scss">
.audio-page {
	width: 100%;
	height: 10.6vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0.4vmin 0.4vmin 0.8vmin #ccc;

	.box-left {
		width: 10%;
		position: relative;
		display: flex;

		.box-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}

		.page-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;

			image {
				width: 6.6vmin;
				height: 6.6vmin;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border-radius: 50%;
			}
		}
	}

	.box-content {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 4vmin;
		box-sizing: border-box;
		font-size: 3.2vmin;

		.content-name {
			width: 100%;
			display: -webkit-box;
			/* 弹性盒模型 */
			-webkit-box-orient: vertical;
			/* 元素垂直居中*/
			-webkit-line-clamp: 1;
			/*  文字显示的行数*/
			overflow: hidden;
			/* 超出隐藏 */
		}

		.progress {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			slider {
				width: 80%;
			}
		}
	}
}
</style>
